<template>
  <div class="top" style="display: flex;align-items: center; justify-content: center;">
    <p class="left" style="width: 8px;height: 25px;background-color: #f6d39c;margin-right: 10px;border-radius: 3px;">
    </p>
    <p style="color: white;font-size: 22px;font-weight: 600;">{{ $t('编辑个人资料') }}</p>
  </div>

  <div class="box1" style="margin-top: 20px;">
    <p style="color: gray;margin-top: 3px;">{{ $t('为了账户安全，请您保管好个人资料') }}</p>
  </div>

  <div class="box2"
    style="margin-top: 20px; width: 100%; display: flex;justify-content: space-around;padding-left: 50px;padding-right: 50px;box-sizing: border-box;">
    <div class="left" style="width: 550px;">
      <div style="display: flex;">
        <p style="width: 250px;text-align: right;color: white;font-weight: 600;">{{ $t('姓名') }}：</p>
        <el-input v-model="form.name" class="press"
          style="background-color: black;margin-left: 18px; color: white;width: 400px;height:40px"></el-input>
      </div>


      <div style="display: flex;margin-top: 35px;">
        <p style="width: 250px;text-align: right;color: white;font-weight: 600;">{{ $t('证件号码') }}：</p>
        <el-input v-model="form.cardno" class="press"
          style="background-color: black;margin-left: 18px; color: white;width: 400px;height:40px"></el-input>
      </div>
      <div style="display: flex;margin-top: 35px;">
        <p style="width: 250px;text-align: right;color: white;font-weight: 600;">{{ $t('身份证正面') }}：</p>
        <p style="margin-left: 18px;width: 400px;min-height: 150px; color: white;background-color: white;overflow: hidden;">
          <img style="width: 400px;" :src="form.zimage_url" :alt="$t('身份证正面照片')">
        </p>
      </div>
    </div>


       <!--  <div class="right" style="width: 550px;">
      <div style="display: flex;" class="sex">
        <p style="width: 100px;text-align: right;color: white;font-weight: 600;">性别：</p>
        <el-select v-model="form.sex"
          style="width: 400px; height: 40px; margin-left: 10px; background-color: black; color: white; border: none;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

            <div style="display: flex;margin-top: 35px;">
                <p style="width: 100px;text-align: right;color: white;font-weight: 600;">证件号码：</p>
                <el-input v-model="form.cardno"
                    style="background-color: black;margin-left: 18px; color: white;width: 400px;height:40px"></el-input>
            </div>
            <div style="display: flex;margin-top: 35px;">
                <p style="width: 100px;text-align: right;color: white;font-weight: 600;">身份证正面：</p>
                <p
                    style="margin-left: 18px;width: 400px;min-width: none;min-height: 150px; color: white;background-color: white;overflow: hidden;">
                    <img style="width: 400px;" :src="form.zimage_url" alt="身份证正面照片">
                </p>
            </div>
        </div> -->


        <div class="right" style="width: 550px;">
            <div style="display: flex;" class="sex">
                <p style="width: 250px;text-align: right;color: white;font-weight: 600;">{{ $t('性别') }}：</p>
                <el-select v-model="form.sex"
                    style="width: 400px; height: 40px; margin-left: 10px; background-color: black; color: white; border: none;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>


            <div class="zhengmian" style="margin-top: 110px;padding-left: 118px;box-sizing: border-box;">
                <el-upload class="avatar-uploader" :show-file-list="false"
                    action="http://43.139.121.71:1010/api/common/upload" method="post" @success="handleSuccessTwo">
                    <p
                        style="color: white; width: 410px;height: 150px;overflow: hidden; background-color: black;text-align: center;">
                        <el-icon
                            style=" font-size: 25px;font-weight: 600; margin-top:30px;margin-bottom: 10px; color: white;">
                            <Plus />
                        </el-icon>
                    <p style="color: white;font-size: 12px;">{{ $t('选择一张身份证正面图片，文件大小小于10M') }}</p>
                    </p>
                </el-upload>

            </div>
        </div>
    </div>

    <div class="mainbottom"
        style="display: flex;width: 100%;justify-content: space-around;padding-left: 20px; padding-right: 50px;box-sizing: border-box;">
        <div style="display: flex;margin-top: 35px;">
            <p style="width: 230px;text-align: right;color: white;font-weight: 600;">{{ $t('身份证反面') }}：</p>
            <p
                style="margin-left:18px ; width: 330px;min-height:100px ; color: white;background-color: white;overflow: hidden;">
                <img style="width: 330px;" :src="form.fimage_url" :alt="$t('身份证反面照片')">
            </p>
        </div>
        <div class="fanmian" style="margin-top: 35px; padding-left: 100px;box-sizing: border-box;">
            <el-upload class="avatar-uploader" :show-file-list="false" action="http://43.139.121.71:1010/api/common/upload"
                method="post" @success="handleSuccess">
                <p
                    style="color: white; width: 430px;height: 150px;overflow: hidden; background-color: black;text-align: center;">
                    <el-icon style=" font-size: 25px;font-weight: 600; margin-top:30px;margin-bottom: 10px; color: white;">
                        <Plus />
                    </el-icon>
                <p style="color: white;font-size: 12px;">{{ $t('选择一张身份证反面图片，文件大小小于10M') }}</p>
                </p>
            </el-upload>
        </div>

    </div>

   <!--  <div class="leftbottom"
        style="margin-top: 20px;display: flex;justify-content: center;margin-bottom: 100px;cursor: pointer;">
        <div @click="goToProfile"
            style="width: 80px;height: 30px;border-radius:5px ;background-color: #f6d39c;display: flex;justify-content: center;align-items: center;margin-right: 10px;">
            <el-icon style="font-size: 20px;margin-right: 5px;">
                <Back />
         </el-icon>
      <div class="zhengmian" style="margin-top: 110px;padding-left: 118px;box-sizing: border-box;">
        <el-upload class="avatar-uploader" :show-file-list="false" action="http://43.139.121.71:1010/api/common/upload"
          method="post" @success="handleSuccessTwo">
          <p
            style="color: white; width: 410px;height: 150px;overflow: hidden; background-color: black;text-align: center;">
            <el-icon style=" font-size: 25px;font-weight: 600; margin-top:30px;margin-bottom: 10px; color: white;">
              <Plus />

            </el-icon>
          <p style="color: white;font-size: 12px;">选择一张身份证正面图片，文件大小小于10M</p>
          </p>
        </el-upload>

      </div>
    </div>
  </div> -->

 <!--  <div class="mainbottom" style="display: flex;padding-left: 90px;">
    <div style="display: flex;margin-top: 35px;">
      <p style="width: 100px;text-align: right;color: white;font-weight: 600;">身份证反面：</p>
      <p style="margin-left: 30px;color: white;background-color: white;overflow: hidden;">
        <img style="width: 400px;" :src="form.fimage_url" alt="身份证反面照片">
      </p>
    </div>
    <div class="fanmian" style="margin-top: 35px; padding-left: 140px;box-sizing: border-box;">
      <el-upload class="avatar-uploader" :show-file-list="false" action="http://43.139.121.71:1010/api/common/upload"
        method="post" @success="handleSuccess">
        <p style="color: white; width: 410px;height: 150px;overflow: hidden; background-color: black;text-align: center;">
          <el-icon style=" font-size: 25px;font-weight: 600; margin-top:30px;margin-bottom: 10px; color: white;">
            <Plus />
          </el-icon>
        <p style="color: white;font-size: 12px;">选择一张身份证反面图片，文件大小小于10M</p>
        </p>
      </el-upload>
    </div>

  </div> -->

  <div class="leftbottom"
    style="margin-top: 20px;display: flex;justify-content: center;margin-bottom: 100px;cursor: pointer;">
    <div
      style="height: 30px;border-radius:5px ;background-color: #f6d39c;display: inline-block; padding-left: 5px;padding-right: 5px;display: flex;justify-content: center;align-items: center;margin-right: 10px;"  @click="goToProfile" >
      <el-icon style="font-size: 20px;margin-right: 5px;">
        <Back />
      </el-icon>
      <span>{{ $t('返回') }} </span>
    </div>
    <div
      style="height: 30px;border-radius:5px ;background-color: #f6d39c;display: inline-block; padding-left: 5px;padding-right: 5px;display: flex;justify-content: center;align-items: center; cursor: pointer;">
      <el-icon style="font-size: 20px;margin-right: 5px;">
        <CopyDocument />
      </el-icon>
      <span @click="submit">{{ $t('保存') }}</span>
    </div>
  </div>
</template>
  
<script>
import { HomeFilled, Promotion, Pointer, Edit, Back, CopyDocument, Plus } from "@element-plus/icons-vue";
import { realSubmitApi, realNameApi, uploadPicApi } from "@/api/index";
import { ElNotification } from 'element-plus'
import router from '@/router'
export default {
  name: 'DashBoard',
  data() {
    return {
      pic1: '',
      pic2: '',
      form: {
        cardno: '',
        name: '',
        sex: '',
        zimage: '',
        fimage: '',
        zimage_url: '',
        fimage_url: '',
      },
      value: '',
      options: [
        {
          value: 1,
          label: this.$t('男'),
        },
        {
          value: 2,
          label: this.$t('女'),
        },
      ],

      idCardFrontImage: '',
      idCardFrontImage2: '',
      lang: {
        show: false,
        active: {
          icon: require('../../assets/headerNav/zhong.png'),
          name: this.$t('中国'),
          value: 'zh-cn'
        },
        list: [
          {
            icon: require('../../assets/headerNav/Indian.png'),
            name: this.$t('印尼语'),
            value: 'Indonesian'
          },
          {
            icon: require('../../assets/headerNav/english.png'),
            name: this.$t('英语'),
            value: 'en'
          },
          {
            icon: require('../../assets/headerNav/zhong.png'),
            name:  this.$t('简体中文'),
            value: 'zh-cn'
          },
          {
            icon: require('../../assets/headerNav/jpan.png'),
            name: this.$t('日语'),
            value: 'jpan'
          },

        ]
      },
    };
  },
  mounted() {
    this.getRealName()
  },
  methods: {
        goToProfile() {
            // 使用 window.location.href 进行跳转
            this.$router.push('/profile');
        },
        // 获取实名认证信息
         getRealName() {
            const token = localStorage.getItem('token')
            const params={
              token:token
            }
            realNameApi( params).then(res => {
                console.log(res.data,'获取到的实名认证的详细信息');
                if(res.data.length !== 0){
                  this.form = res.data
                  console.log(this.form,'form里面的信息')
                }

            })
        },
        // 上传图片接口
        handleSuccess(response, file, fileList) {
            if (response.code == 1) {
                // response 包含了接口返回的数据
                console.log('上传成功，接口返回的数据：', response);
                // 可以根据需要处理接口返回的数据
                this.form.fimage_url = response.data.fullurl
                this.form.fimage = response.data.url
            } else {
                alert(response.msg)
            }
        },
        handleSuccessTwo(response, file, fileList) {
            if (response.code == 1) {
                // response 包含了接口返回的数据
                console.log('上传成功，接口返回的数据：', response);
                // 可以根据需要处理接口返回的数据
                this.form.zimage_url = response.data.fullurl
                this.form.zimage = response.data.url
            } else {
                alert(response.msg)
            }
        },
 
    handleSuccessTwo(response, file, fileList) {
      if (response.code == 1) {
        // response 包含了接口返回的数据
        console.log('上传成功，接口返回的数据：', response);
        // 可以根据需要处理接口返回的数据
        this.form.zimage_url = response.data.fullurl
        this.form.zimage = response.data.url
      } else {
        alert(response.msg)
      }
    },
    // 实名认证提交
    submit() {
      const token = localStorage.getItem('token')
      this.form.token = token
      realSubmitApi(this.form).then(res => {
        // 提示登录
        ElNotification({
          message: res.msg,
          duration: 1000,
          onClose: () => {
            if (res.code == 1) {
              router.push('/profile');
            }
          }
        })
      })
    }
  },

}
</script>
  
<style lang="scss" scoped>
.press:hover{
  cursor: pointer;
}
.custom-country-intl {
  width: 150px;
  height: 30px;
  border-radius: 5px;
}

.header_right_lang {
  position: relative;
  background-color: black;
  border-radius: 15px;

  .header_right_btn {
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    color: #fff;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    line-height: 1.15vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;

    &>img {
      width: 20px;
      height: 15px;
      margin-bottom: 1px;
      margin-right: 5px;
    }
  }

  &>.active {
    border: 2px solid rgba($color: black, $alpha: 1);
    border-radius: 4px;
  }

  .header_right_langList {
    position: absolute;
    background-color: black;
    border-radius: 4px;
    padding: 2px 0;
    width: 150px;

    .header_right_btn {
      color: white;
      padding: 0 12px;
      box-sizing: border-box;
      justify-content: flex-start;
      padding-left: 40px;

      &>img {
        width: 16px;
        height: 11px;
        margin-right: 5px;
      }

      &>span {
        font-size: 13px;
      }

    }

    .header_right_btn:hover {
      background-color: #f6d39c;
      color: black;
    }

    .active {
      background-color: rgba($color: #04d1b3, $alpha: 0.1);

    }
  }
}

:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.4);
  /* lightgray, but transparent */

}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
  background-color: white;
  //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}


.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //gap: 10px;

  color: white;
}

.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
    // background-color: pink;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  /*   .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    } */

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

:deep(.el-input__wrapper) {
  background-color: black ! important;
  box-shadow: none;
}

:deep(.el-upload) {
  background-color: black !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
}

:deep(.el-input__inner) {
  color: #fff !important;
}
</style>

  